<template>
  <el-popover
    v-model="visible"
    placement="bottom"
    :width="!groupHidden?'255':'220'"
    trigger="manual"
    class="moreField"
  >
    <div v-if="visible">
      <el-select v-if="type !== 'RQ'" v-model="list.conditions" size="small" filterable :placeholder="$t('请选择')" clearable style="margin-bottom: 10px;width: 100%">
        <el-option v-for="val in conditionsList" :key="val.dictValue" :label="$t(val.dictLabel)" :value="val.dictValue" />
      </el-select>
      <DatePicker
        v-else
        v-model="list.date"
        style="margin-bottom: 10px;width: 100%"
        size="small"
        class="clearfieldVal dt-date"
        type="date"
        :placeholder="$t('开始时间')"
      />
      <div
        v-if="type === 'WB'"
        class="inlineForm"
      >
        <el-input v-model="list.value" size="small" class="clearfieldVal" :placeholder="$t('请输入')" clearable @keyup.enter.native="confirmSearch" />
      </div>
      <div
        v-if="type === 'JE'"
        class="inlineForm"
      >
        <Money v-model="list.value" size="small" class="clearfieldVal" :placeholder="$t('请输入')" clearable />
      </div>
      <div
        v-if="type === 'ZD'"
        class="inlineForm"
      >
        <el-select v-model="list.value" style="width: 100%" size="small" class="clearfieldVal" clearable :placeholder="$t('请选择')">
          <el-option
            v-for="dict in chooseList"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </div>
      <div
        v-if="type === 'RQ'"
        class="inlineForm"
      >
        <DatePicker
          v-model="list.value"
          style="width:100%;"
          size="small"
          class="clearfieldVal dt-date"
          type="date"
          :placeholder="$t('结束时间')"
        />
      </div>
      <div
        v-if="type === 'YH'"
        class="inlineUser"
      >
        <userSelect
          v-if="type === 'YH'"
          v-model="list.value"
          size="small"
          class="clearfieldVal"
          :placeholder="this.$t('选择用户')"
          style="width: 100%"
        />

      </div>
      <div
        v-if="type === 'BM'"
        class="inlineUser"
      >
        <DeptSelect
          v-model="list.value"
          size="small"
          class="clearfieldVal"
          :placeholder="this.$t('部门')"
          style="width: 100%"
        />

      </div>
      <div style="margin-top:10px;display: flex;justify-content: flex-end;">
        <el-button size="mini" type="text" class="between_flex_1" @click="visible = false">{{ $t("取消") }}</el-button>
        <el-button v-if="!groupHidden" type="primary" size="mini" plain class="between_flex_1" @click="group()">{{ $t("分组") }}</el-button>
        <el-button size="mini" type="primary" plain class="between_flex_1" @click="replacement()">{{ $t("重置") }}</el-button>
        <el-button type="primary" size="mini" class="between_flex_1" @click="confirmSearch()">{{ $t("确定") }}</el-button>
      </div>
    </div>
    <i v-if="list.value === null || list.value === ''" slot="reference" class="screening" @click.stop="visibleToggle" />
    <i v-else slot="reference" class="screening flowers" @click.stop="visibleToggle" />
  </el-popover>
</template>
<script>
// import Vue from 'vue'
export default {
  props: {
    fieldVal: {
      type: Object,
      default: () => {}
    },
    attrName: {
      type: String,
      default: 'fieldName',
      desc: '属性名称'
    },
    initList: {
      type: Object,
      default: undefined
    },
    groupHidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      type: this.fieldVal.type,
      format: this.fieldVal.format,
      list: {
        value: '',
        fieldName: this.fieldVal[this.attrName],
        conditions: '',
        type: this.fieldVal.type,
        date: ''
      },
      conditionsList: [],
      chooseList: []
    }
  },
  watch: {
    'fieldVal.type': {
      handler(val) {
        if (val === 'WB') {
          this.list.conditions = 'BH'
        }
      },
      deep: true,
      immediate: true
    },
    'initList': {
      handler(val) {
        this.$nextTick(() => {
          if (val) {
            val.forEach((ele) => {
              if (this.list.fieldName === ele.fieldName) {
                this.list = ele
                this.$emit('queryData', this.list, true)
              }
            })
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    // 重置
    replacement() {
      this.list = {
        value: '',
        fieldName: this.fieldVal[this.attrName],
        conditions: '',
        type: this.fieldVal.type
      }
      this.$emit('queryData', this.list)
      this.visible = false
    },
    // 查询
    confirmSearch() {
      this.$emit('queryData', this.list)
      this.visible = false
    },
    // 分组
    group() {
      this.$emit('group', this.list)
      this.visible = false
    },
    visibleToggle() {
      this.getDicts('calculation_conditions').then(response => {
        this.conditionsList = response.data
      })
      if (this.fieldVal.format && this.fieldVal.format.indexOf(',') === -1) {
          console.log(this.fieldVal.format)
          this.getDicts(this.fieldVal.format).then(format => {
            this.chooseList = format.data
          })
      }
      this.visible = !this.visible
    }
  }
}
</script>
<style scoped lang="scss">
.between_flex_1{
  flex: 1;
}
/deep/.dt-date {
  .el-date-editor.el-input {
    width: inherit !important;
  }
}
</style>
